<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <title>历史记录翻页效果</title>
    <style>
        .outer li {
            display: none;
        }
        
        ul {
            width: 520px;
            height: 280px;
            margin: 0;
            padding: 0;
            border: 1px solid pink;
        }
        
        .outer .b {
            display: block;
        }
        
        .outer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 800px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <button type="button" class="qian">前一页</button>
        <ul>
            <li class="b"><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
        </ul>
        <button type="button" class="hou">后一页</button>
    </div>
</body>

</html>
<script>
    var qian = document.querySelector('.qian');
    var hou = document.querySelector('.hou');
    var li = document.querySelectorAll('li');
    var img = document.querySelector('img');
    var index = 1;
    qian.onclick = function () {
        index--;
        if(index<1){
            alert('已经是第一页了');
            return;
        }
        console.log(index);
        img.src='img/'+index+'.jpg';

    }
    hou.onclick = function () {
        index++;
        if(index>li.length){
            alert('已经是最后一页了');
            return;
        }
        console.log(index);
        img.src='img/'+index+'.jpg';
    }

</script>